<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2022年7月15日 下午1:50:08
 */
import {configAssetsListAction, updateConfigAction, $image, $response} from '~/api'

onMounted(() => {
  getConfigAssetsList()
})
const assets_list = ref(false)
const updateConfig = async (mark, value = false) => {
  const response = await updateConfigAction({
    mark,
    value: value ? value : assets_list.value[mark]
  })
  $response(response, () => {
    window.$message().success('修改成功，刷新后生效')
    getConfigAssetsList()
  })
}
const getConfigAssetsList = async () => {
  const response = await configAssetsListAction()
  $response(response, () => {
    assets_list.value = response.data
  })
}
const imageUpload = (f, mark) => {
  let readIcon = new FileReader();
  readIcon.onload = function (e) {
    updateConfig(mark, e.target.result)
  };
  readIcon.readAsDataURL(f.file.file);
}
</script>
<template>
  <n-card title="资源设置">
    <div v-if="assets_list">
      <div>
        <n-space>
          <div class="config_title_wrapper">
            <n-tag>
              <div class="config_tag_wrapper">网站名称</div>
            </n-tag>
          </div>
          <div>
            <n-input class="info_input_wrapper" v-model:value="assets_list.title"></n-input>
          </div>
          <div>
            <n-button @click="updateConfig('title')" type="primary">保存标题</n-button>
          </div>
        </n-space>
      </div>
      <div mt-2>
        <n-space>
          <div class="config_title_wrapper">
            <n-tag>
              <div class="config_tag_wrapper">网站图标</div>
            </n-tag>
          </div>
          <div class="info_input_wrapper">
            <n-avatar :size="200" :src="$image(assets_list.logo)"/>
          </div>
          <div>
            <n-upload action="" :show-file-list="false" :default-upload="false"
                      @before-upload="(f)=>{imageUpload(f,'logo')}">
              <n-button type="primary">修改图片</n-button>
            </n-upload>
          </div>
        </n-space>
      </div>
      <div>
        <n-space>
          <div class="config_title_wrapper">
            <n-tag>
              <div class="config_tag_wrapper">页面标签图标</div>
            </n-tag>
          </div>
          <div class="info_input_wrapper">
            <n-avatar :size="200" :src="$image(assets_list.favicon)"/>
          </div>
          <div>
            <n-upload action="" :show-file-list="false" :default-upload="false"
                      @before-upload="(f)=>{imageUpload(f,'favicon')}">
              <n-button type="primary">修改图片</n-button>
            </n-upload>
          </div>
        </n-space>
      </div>
      <div>
        <n-space>
          <div class="config_title_wrapper">
            <n-tag>
              <div class="config_tag_wrapper">登录欢迎图片</div>
            </n-tag>
          </div>
          <div class="info_input_wrapper">
            <n-image width="200" :src="$image(assets_list.login_image)"/>
          </div>
          <div>
            <n-upload action="" :show-file-list="false" :default-upload="false"
                      @before-upload="(f)=>{imageUpload(f,'login_image')}">
              <n-button type="primary">修改图片</n-button>
            </n-upload>
          </div>
        </n-space>
      </div>
    </div>
  </n-card>
</template>
<style scoped>
.info_input_wrapper {
  width: 200px;
}

.config_title_wrapper {
  margin-top: 3px;
}

.config_tag_wrapper {
  width: 100px;
  text-align: center;
}
</style>
<route>
{"meta":{"title":"资源设置","icon":"i-ic-baseline-color-lens"}}
</route>

